import { Component } from 'react';
import { Popup, ActionBar, Stepper, Cell,Toast} from 'react-vant';
import { CartO, StarO ,Star} from '@react-vant/icons';
import "./index.less"
import {addCart} from '../../../api/cart';
class SkuPup extends Component {
    state = {
        isShow: false,
        activeIndex:0,
        num:1
        // // 用来存储当前顶级的属性所对应的索引
        // skuIndex:[0,0]
    }
    render() {
        let { isShow } = this.state;
        let {msgInfo,productAttr,skuList,num} = this.props;
        return (
            <div>
                <Popup
                    visible={isShow}
                    closeable
                    style={{ height: '80%' }}
                    position='bottom'
                    round
                    onClose={() => {
                        this.setState({
                            isShow: false
                        })
                    }}
                >
                    <div className='sku_content'>
                        <div className='sku_header'>
                            <div className='header_left'>
                                <img src={msgInfo.image} alt="" />
                            </div>
                            <div className='header_right'>
                                <p className='header_name'>{msgInfo.storeName}</p>
                                <p className='header_price'>￥{msgInfo.price}</p>
                                <p className='header_stock'> 库存:{msgInfo.stock}</p>
                            </div>
                        </div>
                        <div className='sku_info'>
                            {
                                productAttr.map((item,index)=>{
                                    return (
                                        <div className='skuItem' key={index}>
                                        <div className='sku_name'>{item.attrName}:</div>
                                        <div className='sku_list'>
                                            {
                                                item.attrValues.map((attr,i)=>{
                                                    return (
                                                        <div className={skuList[index]===i?'sku_value sku_active':'sku_value'} key={i} onClick={()=>this.changeSku(index,i)}>{attr}</div>
                                                    )
                                                })
                                            }
                                           
                                        </div>
                                    </div>
                                    )
                                })
                            }
                         
                        </div>
                        <div>
                            <Cell title='数量' center>
                                <Stepper
                                    value={num}
                                    theme='round'
                                    buttonSize='17'
                                    onChange={(value)=>{
                                        this.setState({
                                            num:value
                                        })
                                    }}
                                    disableInput
                                />
                            </Cell>
                        </div>
                    </div>
                    <div>
                        <ActionBar>
                            <ActionBar.Icon icon={<CartO/>} badge={{ content: 5 }} text='购物车' onClick={()=>{ this.props.goCart()}} />
                            <ActionBar.Icon icon={this.props.userCollect?<Star color='rgb(255, 80, 0)'/>:<StarO />} badge={{ dot: true }} text='收藏' onClick={()=>{
                                this.props.setCollect();
                            }}/>
                            <ActionBar.Button type='warning' text='加入购物车' onClick={()=>this.addShopCart()}/>
                            <ActionBar.Button type='danger' text='立即购买' />
                        </ActionBar>
                    </div>
                </Popup>
            </div>
        )
    }
    changeIsShow() {
        this.setState({
            isShow: true
        })
    }
    changeSku(index,i){
    //   console.log(index)
    //   console.log(i)
      this.props.skuList[index] = i;
    //  向父组件传值 告诉父组件 给俺更新一下props
      this.props.setSkuList( this.props.skuList)
    }
    // 加入购物车
   async addShopCart(){
    Toast.loading({
        message: '加入中...',
        forbidClick: true,
      })
        // 获取skuid
        let {productAttrUnique} = this.props.msgInfo;
        //获取商品id
        let {productId} = this.props.msgInfo;
        //获取商品数量
        let {num} = this.state;
        let data = {
            cartNum:num,
            isNew:false,
            productAttrUnique:productAttrUnique,
            productId:productId
        }
        let res = await addCart(data);
        console.log(res)
        if(res.data.code===200){
            Toast.success("加入成功")
            this.setState({
                isShow:false
            })
            return
        }
        
        Toast.clear();
    }
}
export default SkuPup;